<template>
	<div class="alarmConfiguration zy-content">
		<search :columns="searchData" @getSearch="getSearch(arguments)" key="search" @reset="resetSeach"></search>
		<div class="filters">
			<div class="filter">
				<div class="filter-label">设备运行状态</div>
				<!-- <div class="filter-value">
          <div class="item">停机</div>
          <div class="item">待机</div>
          <div class="item">运行</div>
        </div> -->
				<RadioGroup border v-model="stateName" @on-change="selectChange1">
					<Radio label="停机">
						<span class="item">停机 {{ statusTotal.shutdownNumber || '--' }}台</span>
					</Radio>
					<Radio label="待机">
						<span class="item">待机 {{ statusTotal.standbyNumber || '--' }}台</span>
					</Radio>
					<Radio label="运行">
						<span class="item">运行 {{ statusTotal.operationalNumber || '--' }}台</span>
					</Radio>
				</RadioGroup>
			</div>
			<div class="filter">
				<div class="filter-label">设备生产状态</div>
				<!-- <div class="filter-value">
          <div class="item">无工单</div>
          <div class="item">工单未开始</div>
          <div class="item">生产</div>
        </div> -->
				<RadioGroup border v-model="workState" @on-change="selectChange">
					<Radio label="无工单">无工单 {{ statusTotal.noWorkNumber || '--' }}台</Radio>
					<Radio label="工单未开始">工单未开始 {{ statusTotal.notStartedNumber || '--' }}台</Radio>
					<Radio label="生产">生产 {{ statusTotal.produceNumber || '--' }}台</Radio>
				</RadioGroup>
			</div>
		</div>
		<div class="cards">
			<div class="card" v-for="(item, index) in dataArr" :key="index">
				<div class="header">
					<div class="index">{{ item.deviceCode }}</div>
					<div class="states">
						<!-- <div class="state state-stop">停机</div>
            <div class="state state-1">待排产</div>
            <div class="state state-warn">告警</div> -->
						<div :class="['state', item.stateName == '离线' ? 'state-stop' : item.stateName == '告警' ? 'state-warn' : 'state-1']">
							{{ item.stateName }}
						</div>
					</div>
				</div>
				<div class="body">
					<div class="text1">{{ item.workState !== '生产' ? '工单未开始' : '' }}</div>
					<div class="text2">{{ item.workState !== '生产' ? '' : item.workState }}</div>
				</div>
				<div class="footer">
					<div class="descs">
						<div class="desc">
							<div class="desc-label">生产工单：</div>
							<div class="desc-value">{{ item.workCode }}</div>
						</div>
						<div class="desc">
							<div class="desc-label">产品编号：</div>
							<!-- <div class="desc-value">{{ item.materialCode }}</div> -->
							<Tooltip class="desc-value" :content="item.materialCode">{{ item.materialCode }}</Tooltip>
							<!-- <Tooltip class="desc-toop-value" :content="item.materialCode">
                {{item.materialCode}}
              </Tooltip> -->
						</div>
						<div class="desc">
							<div class="desc-label">产品名称：</div>
							<Tooltip class="desc-value" :content="item.materialName">{{ item.materialName }}</Tooltip>

							<!-- <div class="desc-value">{{ item.materialName }}</div> -->
						</div>
						<div class="desc">
							<div class="desc-label">计划/合格：</div>
							<div class="desc-value">{{ (item.planProduceQuantity || 0) + '/' + (item.reportedQuantity || 0) }}</div>
						</div>
						<div class="desc">
							<div class="desc-label">标准/实际周期：</div>
							<div class="desc-value">{{ (item.moldingCycle || 0) + '/' + (item.actualPeriod || 0) }}</div>
						</div>
						<div class="desc">
							<div class="desc-label">预计完工时间：</div>
							<div class="desc-value">{{ item.predictComplateTime }}</div>
						</div>
						<div class="desc">
							<div class="desc-label">合格产品生产进度：</div>
							<div class="desc-value">
								<Progress :percent="getPercent(item) > 100 ? 100 : getPercent(item)" :stroke-width="18" text-inside>
									<span>{{ getPercent(item) }}%</span>
								</Progress>
								<!-- 	:percent="item.reportedQuantity?(item.reportedQuantity*100/item.planProduceQuantity).toFixed(2):0" -->
							</div>
							<!-- <div class="desc-value">{{((item.dataAcquisitionRate * item.realityCavityNum - item.scrapQuantity)*100 / item.planProduceQuantity).toFixed(2)}}%</div> -->
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="pageWrap mt16" v-if="total > 0">
			<Page
				:total="total"
				:page-size="pageSize"
				:page-size-opts="pageSizeOption"
				:current="pageNum"
				@on-change="changePageNum"
				@on-page-size-change="changePageSize"
				show-sizer
				show-total
			/>
		</div>
	</div>
</template>

<script>
import search from '@/components/curd/searchList.vue';
import toggleTableOperation from '@/mixins/toggleTableOperation';
export default {
	name: 'workOrderProgress',
	components: { search },
	mixins: [toggleTableOperation],
	data() {
		return {
			statusTotal: {},
			searchData: [
				{
					title: '车间',
					key: 'installPosition',
					type: 'cascader',
					dicUrl: '/basic/organization/findListByToken?level=0',
					params: {
						label: 'name',
						value: 'code',
						children: 'children',
					},
				},
				{
					title: '设备编号',
					key: 'deviceNo',
				},
				{
					title: '设备类别',
					key: 'deviceCategory',
					dicUrl: '/dms/faultCategory/dictList?name=设备类别',
					type: 'select',
					params: {
						label: 'value',
						value: 'value',
					},
				},
			],
			workState: '',
			stateName: '',
			loading: false,
			searchParams: {},
			pageNum: 1,
			pageSize: 12,
			total: 0,
			dataArr: [],
			pageSizeOption: [12, 24, 48, 96],
		};
	},
	mounted() {
		this.getTableColumnsWidth(this.columns);
		this.getStatusNum();
		this.searchList();
	},
	methods: {
		getPercent(item) {
			return item.reportedQuantity ? ((item.reportedQuantity * 100) / item.planProduceQuantity).toFixed(2) : 0;
		},
		selectChange(val) {
			this.workState = val;
			this.searchList();
		},
		selectChange1(val) {
			this.stateName = val;
			this.searchList();
		},
		resetSeach() {
			this.workState = '';
			this.stateName = '';
		},
		getStatusNum() {
			this.axios({
				url: '/dms/orderProgress/queryOrderProgressTotal',
				method: 'post',
				data: {
					...this.searchParams,
				},
			}).then((res) => {
				this.statusTotal = res;
			});
		},
		getSearch(params) {
			this.searchParams = JSON.parse(JSON.stringify(params[0]));
			const { installPosition } = this.searchParams;
			if (installPosition && installPosition.length > 0) {
				this.searchParams.installPosition = installPosition[installPosition.length - 1];
			} else delete this.searchParams.installPosition;

			this.pageNum = 1;
			this.searchList();
			this.getStatusNum();
		},
		reset() {
			this.searchParams = {};
			this.changeNum();
		},
		//分页 设备信息
		changeNum(data) {
			this.pageNum = 1;
			this.searchParams = data;
			this.searchList();
		},
		changePageSize(pageSize) {
			this.pageSize = pageSize;
			this.searchList();
		},
		changePageNum(val) {
			this.pageNum = val;
			this.searchList();
		},
		//查询列表
		searchList() {
			let params = {
				pageNum: this.pageNum,
				pageSize: this.pageSize,
				workState: this.workState,
				stateName: this.stateName,
			};
			for (let key in this.searchParams) {
				if (this.searchParams[key]) {
					this.$set(params, key, this.searchParams[key]);
				}
			}
			this.axios({
				url: '/dms/orderProgress/queryOrderProgress',
				method: 'post',
				data: params,
			}).then((res) => {
				if (res.code === 200) {
					this.dataArr = res.data.records;
					this.total = res.data.total;
				} else {
					this.$Message.warning({
						content: res.msg,
						duration: 6,
						closable: true,
					});
				}
			});
		},
	},
};
</script>

<style scoped lang="scss">
.ivu-progress-inner-text {
	position: absolute;
	top: -20px;
	color: #333333;
}
.ivu-progress-text {
	position: absolute;
	top: -20px;
	right: 0;
}
/deep/ .ivu-progress-inner{
	background-color: #cbcbcb;
}
.ivu-progress-show-info .ivu-progress-outer {
	padding-right: 0;
}
.ivu-radio-wrapper {
	flex: 1;
}
.ivu-radio-group {
	width: 40%;
	display: flex;
	flex-direction: row;
	// background-color: red;
}
.filters {
	background: #fff;
	border-radius: 8px;
	box-shadow: 0px 4px 8px 0px rgba(0, 20, 45, 0.04);
	padding: 14px;
	margin-top: 10px;
	.filter {
		display: flex;
		.filter-label {
			width: 100px;
		}
		.filter-value {
			display: flex;
			.item {
				margin-right: 5px;
				display: block;
				width: 400px !important;
				background-color: red;
			}
		}
	}
}
.cards {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 1.3%;
	row-gap: 12px;
	margin-top: 10px;

	.card {
		width: 24%;
		background: #fff;
		border-radius: 8px;
		box-shadow: 0px 4px 8px 0px rgba(0, 20, 45, 0.04);
		display: flex;
		flex-direction: column;
		padding: 14px;

		.header {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;
			padding-bottom: 5px;
			margin-bottom: 5px;
			.index {
				font-weight: bold;
			}

			.states {
				display: flex;
				.state {
					border: 1px solid #ccc;
					padding: 2px 6px;
					font-size: 12px;
					border-radius: 3px;
					margin-left: 3px;
				}
				// 运行
				.state-runing {
					border-color: #e5963a;
					color: #e5963a;
				}
				// 待机
				.state-stop {
					border-color: #ccc;
					color: #ccc;
				}
				// 待排产
				.state-1 {
					border-color: #e5963a;
					color: #e5963a;
				}
				// 已排产
				.state-2 {
					border-color: #998bf2;
					color: #998bf2;
				}
				// 下发
				.state-3 {
					border-color: #6bbee1;
					color: #6bbee1;
				}
				// 生产
				.state-4 {
					border-color: #73d8a6;
					color: #73d8a6;
				}
				// 中断
				.state-5 {
					border-color: #d48b3e;
					color: #d48b3e;
				}
				// 暂停
				.state-6 {
					border-color: #d8be49;
					color: #d8be49;
				}
				// 完成
				.state-7 {
					border-color: #4668e2;
					color: #4668e2;
				}
				// 转产中
				.state-8 {
					border-color: #e794c9;
					color: #e794c9;
				}
				// 转产完成
				.state-8 {
					border-color: #c25bc6;
					color: #c25bc6;
				}
				// 调机中
				.state-8 {
					border-color: #d8b2f2;
					color: #d8b2f2;
				}
				// 调机完成
				.state-8 {
					border-color: #8698f6;
					color: #8698f6;
				}
				// 拆模
				.state-9 {
					border-color: #ea709f;
					color: #ea709f;
				}
				.state-warn {
					border-color: red;
					color: red;
				}
			}
		}

		.body {
			display: flex;
			justify-content: space-between;
			border-bottom: 1px solid #ccc;
			padding-bottom: 5px;
			margin-bottom: 5px;
			.states {
				flex: 1;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.state1 {
					display: flex;
					justify-content: center;
					align-items: center;
				}
				.state2 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
				}
			}
		}

		.footer {
			.descs {
				display: flex;
				flex-direction: column;
				.desc {
					display: flex;
					justify-content: space-between;
					margin: 2px 0;
					.desc-label {
						width: 200px;
					}
					.desc-value {
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
						width: 180px;
						// word-break: break-all;
					}
					.desc-toop-value {
						width: 130px;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						// word-break: break-all;
					}
				}
			}
		}
	}
}
</style>
